<template>
    <div class="add-options-container">
        <el-form  ref="formInline" :model="optionsValidateForm"  label-width="90px">
            <div class="form-item-title">
                <span class="title-level">选项内容</span>
            </div>
            <el-row :gutter="41" v-for="(question,index) in optionsValidateForm.selectList" :key="index">
                <el-col :span="18">
                    <!-- :prop="'question.' + index + '.content'"
                            :rules="[{ required: true, message: '选项内容不能为空', trigger: 'blur'}]" -->
                    <el-form-item 
                            :label="'选项'+ optionsAllType[index]" 
                        >
                        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 5}" placeholder="请输入选项内容，最多100个汉字" v-model="question.content" :maxlength="100" resize="none"></el-input>
                        <div class="upload-pic-list">
                            <ul class="upload-pit-list">
                                <li class="attm-img" v-for="(imgs,index) in question.optionsImg" :key="index">
                                    <p class="img">
                                        <img :src="imgs.url">
                                    </p>
                                    <a href="javascript:;" class="close" @click="removePic(question,index)">
                                        <i class="el-icon-circle-close"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <el-button type="text" class="insertFormula" @click="optionsInsertFormula(index)">插入公式</el-button>
                        <file-upload ref="upload" class="uploader-container" @onSuccess="successFn" :subject="true">
                            <el-button @click="insertClick(index)" :class="'insert' + index" type="text">插入图片</el-button>
                        </file-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="4" class="correct">
                    <div class="select-wrapper" :class="{'select': question.isCorrect == 'Y'}" @click.stop.prevent="changeType(question)">
                        <!-- el-icon-circle-check -->
                        <i class="el-icon-circle" :class="{'el-icon-circle-check': question.isCorrect == 'Y'}"></i> 正确
                    </div>
                    <!-- <el-radio class="radio" v-model="showEditStatus" label="">正确</el-radio> -->
                </el-col>
                <el-col :span="2" v-if="optionsValidateForm.selectList.length > 2 ">
                    <el-button type="text"  @click.prevent="removeDomain(index)"><i class="el-icon-delete" style="color:#999"></i></el-button>
                </el-col>
            </el-row>
            <!-- 选项大于8不显示了 -->
            <el-button type="text" @click="addArea" v-if="optionsValidateForm.selectList.length < 8" class="primary addBtn"><i class="el-icon-plus" style="font-size:14px;"></i> 继续添加</el-button>
        </el-form>
        <!-- 弹窗公式 -->
        <formula-dialog :clatex.sync="clatex" @getPicData="setDataPic"></formula-dialog>
        <!-- 弹窗公式 end -->
    </div>
</template>
<script>
import FormulaDialog from './formulaDialog'
import FileUpload from 'components/Upload/fileSubjectUpload';
import Tinymce from 'components/TinyText';
export default {
    name: 'addNewQuestionOptions',
    components: {
        FileUpload,
        FormulaDialog,
        Tinymce
    },
    data() {
        return {
            // question: {
            //     content: '',
            //     radio: ''
            // },
            lastIndex: 0,
            optionsInsertFormulaIndex: 0,
            optionsAllType: [...'ABCDEFGH'],
            // 单选多选 选项
            optionsValidateForm: {
                selectList: [{
                    'content': '',
                    'optionsImg': [],
                    'isCorrect': 'N'
                }, {
                    'content': '',
                    'optionsImg': [],
                    'isCorrect': 'N'
                }]
            },
            showEditStatus: false, // 显示编辑状态
            clatex: false,
            rules: {
                content: [
                    { required: true, message: '请输入题目内容', trigger: 'blur' }
                ]

            }
        }
    },
    mounted() {
        this.sendParentData();
    },
    methods: {
        removePic(question, index) {
            question.optionsImg.splice(index, 1);
            this.sendParentData();
        },
        changeType(item) {
            item.isCorrect == 'Y' ? item.isCorrect = 'N' : (item.isCorrect == 'N' ? item.isCorrect = 'Y': void (0)); 
        },
        addArea() {
            this.showEditStatus = true;
            if (this.optionsValidateForm.selectList.length >= this.optionsAllType.length) return;
            this.optionsValidateForm.selectList.push({
                'content': '',
                'optionsImg': [],
                'isCorrect': 'N'
            });
            this.sendParentData();
        },
        removeDomain(index) {
            if (this.optionsValidateForm.selectList.length > 2) {
                this.optionsValidateForm.selectList.splice(index, 1);
                this.sendParentData();
                return;
            }
        },
        sendParentData() {
            this.$emit('getOptions', this.optionsValidateForm.selectList);
        },
        successFn(data) {
            if (data.errorMsg == '上传成功') {
                this.optionsValidateForm.selectList[this.lastIndex]&&this.optionsValidateForm.selectList[this.lastIndex].optionsImg&&(this.optionsValidateForm.selectList[this.lastIndex].optionsImg.length = 0);
                this.optionsValidateForm.selectList[this.lastIndex].optionsImg.push({
                    name: data.fileName, url: data.imgUrl
                });
            }
        },
        insertClick(index) {
            // 更新index
            this.lastIndex = index;
        },
        setDataPic(data) {
            console.log(data);
            if (data.latexText) {
                this.optionsValidateForm.selectList[this.optionsInsertFormulaIndex].content += '[LaTeXI]' + data.latexText + '[/LaTeXI]';
            }
        },
        optionsInsertFormula(index) {
            this.clatex = true;
            this.optionsInsertFormulaIndex = index;
            
        },
        setOptionList(data) {
            console.log(data);
            this.optionsValidateForm.selectList = data;
        },
        validateOptions() {
            this.$refs.formInline.validate(function(valid) {
                if (valid) {
                    return true;
                }
                return false;
            })
        }
    }
  
}
</script>

<style lang="scss" scoped>
.form-item-title{
    margin: 40px 0;
    font-size: 14px;
    color: #333;
    line-height: 14px;
    border-left: 4px solid #ff5e2c;
    text-indent: 16px;
}
.select-wrapper {
    cursor: pointer;
    user-select: none;
    .el-icon-circle {
        border-radius: 50%;
        width: 16px;
        height: 16px;
        border: 1px solid #ddd;
    }
}
.correct{
    padding-top:10px;
    .select {
        color: #23c865;
        user-select: none;
    }
}
.addBtn{
    padding-left:80px;
}
i{
    font-size:16px;
}
.insertFormula {
    float: left;
    margin-right: 5px;
}
.uploader-container{
    float: left;

}
.upload-pic-list .img img {
    margin-top: 0;
}
</style>


